<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        #box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>  
    <!-- 获取标签内的属性 box.getAttribute("class")  -->
    <!-- 写在标签内 和 标签名以一个空格分隔 叫做属性(属性节点)  id="box" class="one two three" title="hello" -->
    <div id="box" class="one two three" title="hello" >
        <span>我是box</span>
    </div>
</body>
<script>
    var box = document.getElementById("box");

    // 元素节点  => 本质是一个对象(对一个或一类事物特征和行为的描述) => 存在诸多属性和方法

    // console.log(box.innerText);
    // console.log(box.innerHTML);
    // console.log(box.parentElement);
    // console.log(box.children);

    // console.log(box);
    // box.onclick = function(){
    //     alert(1111);
    // }
    console.log(box);
    console.dir(box);   // 打印一个对象或函数的详细属性和方法

    // 元素节点的属性  Element.xxx

    // tagName  获取元素的标签名 (只能取值 不能赋值)  => 区分元素类型
    // console.log(box.tagName);

    // innerHTML    获取和设置 元素内的html结构
    // innerText    获取和设置 元素内的文本结构
    // textContent  获取和设置 元素内的文本结构

    // outerHTML    获取和设置 元素本身及其内部的html结构
    // outerText    获取和设置 元素本身及其内部的文本结构

    // value

    // console.log(box.innerHTML);
    // box.innerHTML = "<i>123123</i>";
    // console.log(box.innerText);
    // console.log(box.textContent);
    // box.innerText ="12312323";
    // box.textContent ="456456";

    // console.log(box.outerHTML);
    // box.outerHTML = "asdasd";
    // console.log(box.outerText);
    // box.outerHTML = "asdasd";


    // className 获取和设置 元素节点的 class名 (元素节点的属性)
    // classList 返回 由元素节点的class名形成的 集合

    // console.log(box.className);
    // box.className = "haha";

    // console.log(box.classList);

    // id   获取和设置 元素的 id 名
    // console.log(box.id);
    // box.id = "haha";

    // title  获取和设置 元素的 title
    // console.log(box.title);
    // box.title = "你好";

    // style  获取和设置内联样式

    console.log(box.style.background);  // 只能获取内联 =>  内部样式 和 外部样式 无法获取

    // box.style.background = "red";   // 设置没有问题








</script>
</html>